import Vue from 'vue'
// 引入vuex仓库
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'

// 注册vuex仓库
Vue.use(Vuex)

// store是唯一的一个数据仓库(管家)
// 复习知识点1: store里包含5大核心配置项(概念) - 定义
// state -> 定义变量
// mutations -> 定义方法(形参1是state, 唯一可以修改state值的地方) -> devTool工具检测到
// actions -> 定义方法(形参1是store, 异步操作来修改state, 但是也要提交到mutations)一般在actions里发送异步请求
// getters -> vuex里计算属性 -> 计算返回值(快速返回state的值)
// modules -> 集中式管理太多，不方便维护数据, 可以分散到多个模块分别管理(但是最后都要挂载到根store上)

// 知识点2: 每个 moudles 对象里还是包含这5个核心概念, 还能继续嵌套管理

// 知识点3: vuex里的东西, 如何在vue组件页面/js文件里进行使用
// 1:直接使用
// (1).不分模块
// 获取数据 $store.state.属性名
// 调用mutations里的方法 $store.commit(方法名,值)
// 调用actions里的方法 $store.dispatch(名,值)
// (2).分模块 不开命名空间
// 获取数据 $store.state.模块名.属性名
// 调用mutations里的方法 $store.commit(方法名,值)
// 调用actions里的方法 $store.dispatch(名,值)
// (3).分模块  开命名空间
// 获取数据 $store.state.模块名.属性名
// 调用mutations里的方法 $store.commit(模块名/方法名,值)
// 调用actions里的方法 $store.dispatch(模块名/名,值)
// 调用getters变量 $store.getters['模块名/xxx']

// 2.映射使用
// 使用分别引入的方法将vuex中mapState,mapGetter,mapMutations与mapActions四个vuex内置方法引入到需要使用的组件上
// 使用的时候直接在相应的位置引入相应的方法数据就可
// mapState与mapGetter映射的值都属于属性，所以一般用在computed选项中，
// mapMutations与mapActions映射的值都属于方法，所以一般用在methods中，它们的参数支持数组与对象用法，并返回一个对象

const store = new Vuex.Store({
  modules: { // vuex分模块: key模块名, value模块配置对象
    app, // 侧边栏对象, 设备型号
    settings, // 侧边栏有logo? 头部是否固定定位
    user, // token, name, 等用户信息
    permission // 左侧导航栏路由模块(静态路由＋筛选后的动态路由)
  },
  getters // 根上的(方便逻辑页面直接访问, getters内部帮我去映射每个模块里state)
})

export default store
